<template>
    <view class="xilu p30">
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
        
            <view class="fs34 col3 fwb pb30">分享精致生活</view>
            <view class="flex-box pb40" v-for="(item,index) in topicLists" @click="bindTopicDetail(item.topic_id)">
                <image :src="item.topic.image_text" class="xilu_pic" mode="aspectFill"></image>
                <view class="flex-grow-1 pl20">
                    <view class="fs30 col3 fwb pb10">{{item.topic.name}}</view>
                    <view class="fs24 cola">{{item.topic.topic_join_count}}人讨论</view>
                </view>
                <view class="btn4" @click.stop="bindExit(index)">退出圈子</view>
            </view>
       
		</mescroll-body>
    </view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
		mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                topicLists:[],
            };
        },
		onLoad() {
			
		},
		methods:{
			/*上拉加载的回调*/
			upCallback(page) {
			    // 此处可以继续请求其他接口
			    let pageNum = page.num; // 页码, 默认从1开始
			    let pageSize = page.size; // 页长, 默认每页10条
			    this.$core.get({
			        url: 'xilumarket.user/my_topic',
			        data: {
			            page: pageNum,
			            pageSize: pageSize
			        },
			        success: (ret) => {
			            let data = ret.data;
			            // 接口返回的当前页数据列表 (数组)
			            let curPageData = data.data;
			            // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
			            let curPageLen = curPageData.length;
			            // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
			            let totalPage = data.last_page;
			            // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
			
			            //设置列表数据
			            if (page.num == 1) this.topicLists = []; //如果是第一页需手动置空列表
			            this.topicLists = this.topicLists.concat(curPageData); //追加新数据
			
			            // 请求成功,隐藏加载状态
			            //方法一(推荐): 后台接口有返回列表的总页数 totalPage
			            this.mescroll.endByPage(curPageLen, totalPage);
			
			            setTimeout(() => {
			                this.mescroll.endSuccess(curPageLen)
			            }, 20)
			        },
			        fail: () => {
			            //  请求失败,隐藏加载状态
			            this.mescroll.endErr()
			        }
			    })
			},
			//进入话题
			bindTopicDetail(id){
				uni.navigateTo({
					url: '/discovery/trends_circle/trends_circle?id='+id
				})
			},
			//退出
			bindExit(index){
				let id = this.topicLists[index].topic_id
				let page = this;
				uni.showModal({
					title:'提示',
					content: '确认退出',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.topic/toggle_join',data: {topic_id: id},success: ret => {
									page.topicLists.splice(index,1);
									page.$forceUpdate();
								},fail: err => {
										
								}
							});
						}
					}
				})
			},
			
		}
    }
</script>

<style lang="scss" scoped>
.xilu{
    &_pic{
        width: 75rpx;
        height: 75rpx;
        border-radius: 10rpx;
    }
    .btn4{
        width: 130rpx;
        height: 55rpx;
        line-height: 55rpx;
        border-radius: 28rpx;
        font-size: 24rpx;
    }
}
</style>
